<template>
    <div class="common-layout">
        <el-container>
            <el-header class="header">
                <Header :is-login="isLogin"></Header>
            </el-header>
            <el-main class="main">
                <Swipper></Swipper>

                <!-- 悬浮小球 -->
                <FloatIcons :initial-x="1206" :initial-y="505"></FloatIcons>

                <StudyLog v-if="isLogin"></StudyLog>
                <Find v-else></Find>
            </el-main>
            <el-footer class="footer">
                <Footer></Footer>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
// 导入组件
import FloatIcons from '@/components/floatpage/FloatIcons.vue';
import Footer from '@/components/Footer.vue';
import Header from '@/components/Header.vue';
import Find from '@/views/find/Find.vue';
import StudyLog from '@/views/studyLog/Note.vue';
import Swipper from '@/views/swipper/Swipper.vue';
import { computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();

// 判断对象是否为空

const isLogin = computed(() => localStorage.getItem("userInfo") === null ? false : true);
</script>

<style lang="scss" scoped>
.common-layout {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.el-header{
    padding: 0;
}

.header {
    position: sticky;
    top: 0;
    // padding: 0;
    margin: 0;
    z-index: 1000;
}

.main {
    padding: 0;
    margin: 20px 0;
}

.footer {
    padding: 0;
    margin: 0;
}
</style>
